<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>欢迎注册会员</title>
    <style>
      div {
        width: 1px;
        margin: 1px auto;
        text-align: start;
      }
      span {
        display: inline-block;
        width: 80px;
        cursor: pointer;
      }
      img {
        vertical-align: middle;
        width: 30px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h5><span style="color: rgb(65, 65, 241)">欢迎注册会员</span></h5>
    <form method="post" action="#">
      <label for="num"> <b>手机号码：</b></label>
      <input type="text" name="num" id="num" placeholder="11位手机号" />
      <span style="color: red">必填</span>
      <br />

      <label for="pwd"><b>创建密码：</b> </label>
      <input type="password" name="pwd" id="pwd" placeholder="8位密码" />
      <span style="color: red">必填</span>
      <br />

      <label for="mail"> <b> 注册邮箱：</b></label>
      <input
        type="text"
        name="mail"
        id="mail"
        placeholder="例如：wustzz@sina.com"
      />
      <span style="color: red">必填</span>
      <br />

      <label for="yzm"> <b>&nbsp;&nbsp; 验证码：</b> </label>
      <input type="text" name="yzm" id="yzm" />
      <span id="capcha">5位验证码</span>
      <img src="images/arrow_03.png" id="change_capcha" alt="" />
      <br />

      <label><b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 性别：</b></label>
      <input type="radio" name="sex" value="male" checked="checked" /> 男
      <input type="radio" name="sex" value="female" /> 女
      <br />

      <label for="bir"> <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日：</b> </label>
      <input type="date" name="bir" id="bir" />
      <br />

      <label for="age"> <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄：</b> </label>
      <input type="text" name="age" id="age" />
      <br />

      <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯：</b>
      <!-- <select id="province" onchange="showCity(this.value)">
        <option>--请选择--</option>
        <option value="0">安徽</option>
        <option value="1">浙江</option>
        <option value="2">江苏</option>
        <option value="3">湖北</option></select>
      <select id="city"></select> -->
      <select onchange="changeCity(this.value)">
        <option>--请选择省份--</option>
        <option value="0">北京</option>
        <option value="1">浙江省</option>
        <option value="2">河北省</option>
        <option value="3">广东省</option>
    </select>
    <select id="city">
    </select>

      <br />


      <b>个人学历：</b>
<select name="major">
<option value="0">本科</option>
<option value="1" selected="selected" >专科</option>
<option value="2">无</option>
</select>
<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>月薪：</b>
<input type="range" id="score" name="score" min="0.0" max="100.0" step="0.5" value="60.0" >
<span id="msg"></span>
<br>

<b>个人爱好：</b>
<label>
  <input type="checkbox" name="like" value="sing">唱歌
  </label>
  <input type="checkbox" name="like" value="dance">跳舞
  </label>
  <input type="checkbox" name="like" value="swim">游泳
  </label>
  <label>
  <input type="checkbox" name="like" value="basketball">打篮球
  </label>
  <br>

    <b>个人照片：</b>
    <br>
<p></p>
<p id="test-image-preview" style="border: 1px solid silver; width: 1920px; height: 1080px; background-repeat: no-repeat; 
background-position: center;">
</p>
<p></p>
<p>
<input type="file" id="test-image-file" name="test">
</p>
<p id="test-file-info"></p>
    <br>

    <b>个人简介：</b>
    <br>
    <textarea name="intro" cols="40" rows="10"></textarea>
    <br>

     <input type="submit" value="提交">
     <input type="reset" value="重填">
    
    </form>
  </body>
</html>



<script>
  let codeStr =
    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";//验证码：由大小写字母或数字组成
  let length = 5;//验证码长度
  let capcha = document.getElementById("capcha");
  let change_capcha = document.getElementById("change_capcha");// 用来生成一个[n,m]随机整数
  function getRandom(n, m) {
    return parseInt(Math.random() * (m - n + 1) + n);
  }
  // 将随机生成的整数下标对应的字母放入span中
  function getCode() {
    let str = "";
    // 验证码有几位就循环几次
    for (let i = 0; i < length; i++) {
      let index = getRandom(0, 61);
      str += codeStr.charAt(index);
    }
    capcha.innerHTML = str;
  }
  // 页面初始加载时就调用函数生成验证码，页面刷新也会执行
  getCode();
  // 点击刷新验证码
  capcha.addEventListener("click", getCode);
  change_capcha.addEventListener("click", getCode);
<!-- </script>
<script type="text/javascript">
  var arr = new Array(4);
  arr[0] = ["安徽", "合肥", "芜湖", "安庆", "铜陵"];
  arr[1] = ["浙江", "杭州", "宁波", "温州", "嘉兴"];
  arr[2] = ["江苏", "南京", "苏州", "无锡"];
  arr[3] = ["湖北", "武汉", "黄冈", "荆州"];

  function showCity(value) {
    var city1 = document.getElementById("city");
    var opts = city1.getElementsByTagName("option");
    for (var a = 0; a < opts.length; a++) {
      var opt = opts[a];
      city1.removeChild(opt);
      a--;
    }

    for (var i = 0; i < arr.length; i++) {
      var arr1 = arr[i];
      var fristvalue = arr1[0];
      if (fristvalue == value) {
        for (var j = 1; j < arr1.length; j++) {
          var value1 = arr1[j];
          //alert(value1);
          var option1 = document.createElement("option");
          var text1 = document.createTextNode(value1);
          option1.appendChild(text1);
          city1.appendChild(option1);
        }
      }
    }
  }
</script> -->

<script>
	//创建二维数组存储省份和对应的城市
	var cityList = new Array();
	cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
	cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
	cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
	cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
 
	function changeCity(val) {
		//获取到城市的下拉列表框
		var city = document.getElementById("city");
		//先去清空原有的城市下拉列表内容
		city.options.length = 0;
		var arr = cityList[val];
		for(var i = 0; i < arr.length; i++) {
			//创建option元素节点
			var option = document.createElement("option");
			//设置option元素节点的内容和value
			option.innerHTML = arr[i];
			option.value = arr[i];
			//将新创建的option节点添加到城市下拉框中
			city.appendChild(option);
		}
	}
</script>

<script>
var msg = document.getElementById("msg"); // 根据id值找到span元素
window.onload = function () { 
msg.innerHTML = document.getElementById("score").value; // 获取区间域初始value值 
}
document.getElementById("score").onchange = function () { 
msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
}
</script>
<script>
var fileInput = document.getElementById('test-image-file');
var info = document.getElementById('test-file-info');
var preview = document.getElementById('test-image-preview'); 
fileInput.addEventListener('change', function () { // 监听change事件
preview.style.backgroundImage = ''; // 清除背景图片
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
} 
var file = fileInput.files[0]; // 获取File引用
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的图片文件!');
return;
} 
var reader = new FileReader(); // 读取文件
reader.onload = function (e) { // 发起一个异步操作来读取文件内容
var data = e.target.result; // data串形如： '...(base64编码)...' 
preview.style.backgroundImage = 'url(' + data + ')';
}; 
reader.readAsDataURL(file); // 以DataURL的形式读取文件
});
</script>